
new Vue({
    el: '#app', // 挂载到 HTML 中 id 为 'app' 的元素
    data: {
        formData: {
            username: '',
            email: '',
            phone: '', // 手机号数据属性
            password: '',
            confirmPassword: ''
        },
        errorMessage: '', // 用于显示错误信息
        successMessage: '' // 用于显示成功信息
    },
    computed: {
        // 计算属性：检查表单是否有效
        isFormValid() {
            // 1. 检查所有字段是否都已填写
            const allFieldsFilled = this.formData.username &&
                this.formData.email &&
                this.formData.phone &&
                this.formData.password &&
                this.formData.confirmPassword;

            // 2. 检查两次密码是否一致
            const passwordsMatch = this.formData.password === this.formData.confirmPassword;

            // 3. 简单的邮箱格式验证
            const emailIsValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email);

            // 4. 简单的手机号格式验证（以中国大陆11位手机号为例）
            const phoneIsValid = /^1[3-9]\d{9}$/.test(this.formData.phone);

            // 如果所有条件都满足，则表单有效
            return allFieldsFilled && passwordsMatch && emailIsValid && phoneIsValid;
        }
    },
    methods: {
        // 注册用户方法，处理表单提交
        async registerUser() { // 声明为 async 函数以便使用 await
            this.errorMessage = ''; // 提交前清空所有消息
            this.successMessage = '';

            // 如果前端验证不通过，显示错误信息并返回
            if (!this.isFormValid) {
                if (this.formData.password !== this.formData.confirmPassword) {
                    this.errorMessage = '两次输入的密码不一致！';
                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
                    this.errorMessage = '请输入有效的邮箱地址！';
                } else if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
                    this.errorMessage = '请输入有效的11位手机号！';
                } else {
                    this.errorMessage = '请填写所有必填字段！';
                }
                return;
            }

            // 准备要发送到后端的数据（只包含必要字段）
            const userData = {
                username: this.formData.username,
                email: this.formData.email,
                phone: this.formData.phone,
                password: this.formData.password // 注意：实际应用中密码应加密传输
            };

            console.log('准备发送注册数据到后端:', userData);

            try {
                // 使用 fetch API 发送 POST 请求到后端
                const response = await fetch('http://localhost:8080/api/register', {
                    method: 'POST', // 指定请求方法为 POST
                    headers: {
                        'Content-Type': 'application/json' // 告诉服务器请求体是 JSON 格式
                    },
                    body: JSON.stringify(userData) // 将 JavaScript 对象转换为 JSON 字符串
                });

                // 检查 HTTP 响应状态码
                if (response.ok) { // 如果状态码在 200-299 之间，表示成功
                    const result = await response.json(); // 解析后端返回的 JSON 数据
                    this.successMessage = result.message || '注册成功！'; // 显示后端返回的成功消息
                    console.log('注册成功响应:', result);
                    this.resetForm(); // 注册成功后清空表单
                } else {
                    // 如果状态码不在 200-299 之间，表示有错误
                    const errorData = await response.json(); // 解析后端返回的错误信息
                    this.errorMessage = errorData.message || '注册失败，请稍后再试。'; // 显示后端返回的错误消息
                    console.error('注册失败响应:', errorData);
                }
            } catch (error) {
                // 捕获网络错误或其他请求过程中的异常
                this.errorMessage = '网络请求失败，请检查网络连接或稍后再试。';
                console.error('网络请求错误:', error);
            }
        },
        // 重置表单所有字段的方法
        resetForm() {
            this.formData.username = '';
            this.formData.email = '';
            this.formData.phone = '';
            this.formData.password = '';
            this.formData.confirmPassword = '';
        }
    }
});